<template>
	<div>
		<!-- <form action="http://10.10.10.114:8080/admin/login">
		<p><input name="username"/></p>
		<p><input name="password"/></p>
		<p><input type="submit" value="登录"></p>
		</form> -->
		<el-form :model="ruleForm" status-icon style="width:400px;margin:100px auto;" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item  prop="username">
		    <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item  prop="password">
		    <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">登录</el-button>
		  </el-form-item>
		</el-form>

	</div>
</template>

<script>
	import Cookie from 'js-cookie'
	import {
		userLogin
	} from '@/api/user.js'
	export default {
		data(){
			 var validatePassword = (rule, value, callback) => {
				if (value == null || value.trim() === '') {
					callback(new Error('请输入用户名'));
					return;
				} else{
					//一定要写admin   正则表达式   //  test
					if(value.trim() != "admin"){
						callback(new Error("请猜猜正确的用户名"));
						return;
					} 
				} 
				callback();
			}			
			return{
				  ruleForm: {
						username:'admin',
						password:'macro123'
				 },
				 rules: {
					 username:[
						  { validator: validatePassword, trigger: 'blur' }
					 ],
					 password:[
						 {required:true,message:"请输入密码",trigger:"blur"}
					 ]
				  //  pass: [
					 // { validator: validatePass, trigger: 'blur' }
				  //  ],
				  //  checkPass: [
					 // { validator: validatePass2, trigger: 'blur' }
				  //  ],
				  //  age: [
					 // { validator: checkAge, trigger: 'blur' }
				  //  ]
				 } 
			}	  
		},
		methods:{
			submitForm(){
				console.log("登录");
				userLogin(this.ruleForm)
				.then(resp=>{
					if(resp.data.code==200){
						//登录成功
						//处理token
						alert("成功")
						let token = resp.data.data.tokenHead+resp.data.data.token;
						Cookie.set("loginToken",token);
						this.$store.commit("changeLoginToken",token);
						//跳转页面
						this.$router.push("/home")
					}
				})
			}
		},
		mounted() {
			console.log();
			//页面我就登录操作
			// axios.post(
			// 	"http://10.10.10.114:8080/admin/login",
			// 	{
			// 		username:"admin",
			// 		password:"macro123",
			// 	}
			// )
			// // userLogin({username:"admin",password:"macro123"})
			// .then(resp=>{
			// 	//要把登录成功的令牌信息保存到cookie中，因为我们访问后台都要验明正身
			// 	//保存的名字是loginToken  值是：tokenHead+token
			// 	// token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImNyZWF0ZWQiOjE2MDA4MjUzMzc0ODYsImV4cCI6MTYwMTQzMDEzN30.GQaiLTFtns3DaFjMrPJIeDGgq2As7VUDp4T3mAixai0bc7cQZVLd246UwIO5TZzFItADVKF4NU7QDGQEGCjNuQ"
			// 	// tokenHead: "Bearer "
			// 	console.log(resp.data.data.tokenHead+resp.data.data.token);
			// 	Cookie.set("loginToken",resp.data.data.tokenHead+resp.data.data.token);

			// 	//登录成功，跳转到首页
			// 	this.$router.push("/home");
			// })
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.login-bg {
		height: 220px;
		width: 100%;
		background: #409EFF url(../../assets/images/login_center_bg.png);
		background-size: 1080px;
		position: absolute;
		top: 50%;
		margin-top: -110px;
	}

	.login-border {
		border-top: 10px #409EFF solid;
	}

	.box-card {
		width: 360px;
		height: 500px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
		margin-left: -180px;

		.login-title {
			text-align: center;
			font-size: 28px;
			font-weight: bold;
			color: rgb(64, 158, 255);

			#icon-login-mall {
				width: 56px;
				height: 56px;
			}
			p{
				padding-bottom:10px;margin:5px;
			}
		}

	}
</style>
